<route>
    {
        meta: {
            layout: 'index',
            title:'马笼头信息管理'
        }
    }  
</route>
<template>
  <view>
    <div class="app-container">
      <a-row>
        <a-input-search v-model:value="searchKey" placeholder="请输入马笼头名称" enter-button="搜索"
          style="width: 250px; margin-bottom: 10px" @search="handleQuery()" />
        <a-button style="margin-left: 10px" type="dashed" @click="reset">重置</a-button>
        <a-button type="primary" style="margin-left: auto; margin-bottom: 10px; width: 100px" @click="addItem">
          <template #icon><plus-outlined /></template>新增
        </a-button>
      </a-row>
      <a-table :dataSource="dataSource" :columns="columns" bordered :scroll="{ x: 1000, y: 600 }" :pagination="false">
        <template #bodyCell="{ column, text, record }">
          <template v-if="column.dataIndex === 'image'">
            <div style="margin-bottom: 15px">
              <a-image :width="10" style="height: 100" :src="`/dev-api/ufs/preview/${record.fileId}`" />
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'action'">
            <div>
              <span>
                <a-button type="link" @click="editItem(record)">编辑</a-button>
                <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                  <a-button type="link" danger>删除</a-button>
                </a-popconfirm></AntdZh>
              </span>
            </div>
          </template>
        </template>
      </a-table>
      <AntdZh>
        <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
          @change="getList" />
      </AntdZh>

      <!-- 新版添加或修改部门对话框 -->
      <AntdConfirmModal :title="title ? '新增马笼头' : '编辑马笼头'" ref="modalRef" width="800px" :keepSlot="false"
        @confirm="submitForm">
        <a-form :model="form" name="basic" :label-col="{ span: 10 }">
          <a-row>
            <a-col :span="12">
              <a-form-item label="产品型号ID" name="horseheadId" :rules="[{ required: true, message: '请输入产品型号ID' }]">
                <a-input v-model:value="form.horseheadId" style="width: 150px" placeholder="请输入产品型号ID" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="产品名称" name="horseheadName" :rules="[{ required: true, message: '请输入产品名称' }]">
                <a-input v-model:value="form.horseheadName" style="width: 150px" placeholder="请输入产品名称" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="长度" name="length" :rules="[{ required: true, message: '请输入长度' }]">
                <a-input-number v-model:value="form.length" style="width: 150px" controls-position="right" :min="0" addon-after="m"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="最大直径D2" name="maxDiameter" :rules="[{ required: true, message: '请输入最大直径D2' }]">
                <a-input-number v-model:value="form.maxDiameter" style="width: 150px" controls-position="right"
                  :min="0" addon-after="mm"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="最大直径D2长度" name="maxDiameterLength" :rules="[{ required: true, message: '请输入最大直径D2长度' }]">
                <a-input-number v-model:value="form.maxDiameterLength" style="width: 150px" controls-position="right"
                  :min="0" addon-after="mm"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="最小直径D1" name="minDiameter" :rules="[{ required: true, message: '请输入最小直径D1' }]">
                <a-input-number v-model:value="form.minDiameter" style="width: 150px" controls-position="right"
                  :min="0" addon-after="mm"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="最小直径D1长度" name="minDiameterLength" :rules="[{ required: true, message: '请输入最小直径D1长度' }]">
                <a-input-number v-model:value="form.minDiameterLength" style="width: 150px" controls-position="right"
                  :min="0" addon-after="mm"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="最大承受压力" name="maxPressure">
                <a-input-number v-model:value="form.maxPressure" style="width: 150px" controls-position="right"
                  :min="0" addon-after="MPa"/>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="最高工作温度" name="maxTemperature">
                <a-input-number v-model:value="form.maxTemperature" style="width: 150px" controls-position="right"
                  :min="0" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="接口螺纹" name="thread">
                <a-input v-model:value="form.thread" style="width: 150px" controls-position="right" />
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="上传仪器">
                <a-upload v-model:fileList="fileList" name="file" :before-upload="beforeUpload" :maxCount="1"
                  @remove="handleRemove">
                  <a-button>
                    <upload-outlined></upload-outlined>
                    Click to Upload
                  </a-button>
                </a-upload>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </AntdConfirmModal>
    </div>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { cloneDeep } from "lodash-es";
import { queryList, deleteOne, updateOne, createOne } from "@/api/tool/horsehead.js";
import { PlusOutlined, UploadOutlined } from "@ant-design/icons-vue";
import request from "@/utils/request";
import useApp from "@/hooks";
const { $, proxy } = useApp();
const modalRef = ref(null);
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
const total = ref(1);
const dataSource = ref([]);
const title = ref(null);
const fileList = ref([]);
const fileForm = ref({
  file: null,
});

// 定义表格列配置
const columns = [
  {
    title: "",
    dataIndex: "image",
    key: "image",
    fixed: "left",
    width: 50,
  },
  {
    title: "产品型号ID",
    dataIndex: "horseheadId",
    key: "horseheadId",
    fixed: "left",
    width: 130,
  },
  {
    title: "产品名称",
    dataIndex: "horseheadName",
    key: "horseheadName",
    width: 150,
  },
  {
    title: "长度(m)",
    dataIndex: "length",
    key: "length",
    width: 100,
  },
  {
    title: "最大直径D2(mm)",
    dataIndex: "maxDiameter",
    key: "maxDiameter",
    width: 110,
  },{
    title: "最大直径D2长度(mm)",
    dataIndex: "maxDiameterLength",
    key: "maxDiameterLength",
    width: 110,
  },
  {
    title: "最大承受压力(MPa)",
    dataIndex: "maxPressure",
    key: "maxPressure",
    width: 120,
  },
  {
    title: "最高工作温度",
    dataIndex: "maxTemperature",
    key: "maxTemperature",
    width: 120,
  },
  {
    title: "最小直径D1(mm)",
    dataIndex: "minDiameter",
    key: "minDiameter",
    width: 110,
  },{
    title: "最小直径D1长度(mm)",
    dataIndex: "minDiameterLength",
    key: "minDiameterLength",
    width: 110,
  },
  {
    title: "接口螺纹",
    dataIndex: "thread",
    key: "thread",
    width: 110,
  },
  {
    title: "操作",
    dataIndex: "action",
    key: "action",
    fixed: "right",
    width: 160,
  },
];
const searchKey = ref();
const query = ref({ pageNum: 1, pageSize: 10, sortBy: "id", searchKey: "" });

// 删除
const del = (key) => {
  if (form.value.fileId != null) {
    deleteFile(key);
  } else {
    deleteOne(key).then((res) => {
      $.showToast({
        title: "删除成功",
        icon: "success",
      });
      getList();
    });
  }
};

const beforeUpload = (file) => {
  // 记录文件
  fileForm.value.file = file;
  // 直接停止上传
  return false;
};
// 移除文件
const handleRemove = (file) => {
  fileForm.value.file = null;
};

// 文件上传
function uploadFile() {
  const formData = new FormData();
  formData.append("file", fileForm.value.file);
  formData.append("bucketName", "test");
  request
    .post("/ufs/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    })
    .then((res) => {
      form.value.fileId = res.id;
      if (title.value == true) {
        createOne(form.value).then((res) => {
          modalRef.value.closeModal();
          getList();
        });
      } else if (title.value == false) {
        updateOne(form.value).then((res) => {
          modalRef.value.closeModal();
          getList();
        });
      }

      $.showToast({
        title: "上传成功",
        icon: "success",
      });
      getList();
      modalRef.value.closeModal();
    });
}
// 文件删除
function deleteFile(key) {
  request
    .delete("/disk/dirs/0/files/" + form.value.fileId + "", {
      headers: {
        "Content-Type": "application/json",
      },
    })
    .then((res) => {
      form.value.fileId = res.id;
      deleteOne(key).then((res) => {
        $.showToast({
          title: "删除成功",
          icon: "success",
        });
        getList();
      });
      $.showToast({
        title: "删除马笼头图片成功",
        icon: "success",
      });
      getList();
      modalRef.value.closeModal();
    });
}
//编辑
function editItem(e) {
  form.value = e;
  title.value = false;
  modalRef.value.openModal();
}
// 新增
function addItem() {
  title.value = true;
  form.value = {};
  modalRef.value.openModal();
}
/** 提交按钮 */
function submitForm() {
  if (fileForm.value.file != null) {
    uploadFile();
    return;
  } else if (title.value == true) {
    form.value.fileId = null;
    createOne(form.value).then((res) => {
      modalRef.value.closeModal();
      getList();
    });
  } else if (title.value == false) {
    form.value.fileId = null;
    updateOne(form.value).then((res) => {
      modalRef.value.closeModal();
      getList();
    });
  }
}

/** 查询井列表 */
function getList() {
  queryList(query.value).then((response) => {
    dataSource.value = response.content;
    total.value = response.totalElements;
  });
}
getList();

/** 搜索按钮操作 */
function handleQuery() {
  console.log("searchKey", searchKey);
  query.value.searchKey = searchKey;
  console.log("query.value.searchKey", query.value.searchKey);
  getList();
}

/** 表单重置 */
function reset() {
  searchKey.value = "";
  query.value = {
    pageNum: 1,
    pageSize: 10,
    sortBy: "id",
    searchKey: "",
  };
  getList();
}
</script>
<style>
.right-aligned-button {
  display: flex;
  /* 使用 flex 布局 */
  justify-content: space-between;
  /* 把按钮放在 div 的最右边 */
}
</style>
